<template>
  <div class="Maintenance-container">
    <div class="Maintenance-head">
      <div>
        <v-select
          v-model="selected"
          :items="model === 'Setting' ? settingItems : adminItems"
          @change="selectItem"
          solo
          flat
          class="input-select"
          background-color="#ECEDEE"
        >
          <template #label>
            <div class="input-label">{{ model }}</div>
          </template>
          <template #selection>
            <div class="input-selection">{{ model }}</div>
          </template>
          <template slot="prepend-item">
            <div class="input-head">
              <v-btn-toggle
                v-model="model"
                rounded
                mandatory
                borderless
                class="input-head-item-btns"
              >
                <v-btn class="btn" value="Setting" rounded small>Setting</v-btn>
                <v-btn class="btn" value="Admin" rounded small>Admin</v-btn>
              </v-btn-toggle>
            </div>
          </template>
        </v-select>
      </div>
      <div
        v-if="StoreActionIcon !== ''"
        @click="clickAction"
        class="icon-import-wrap pointer"
      >
        <v-icon class="icon-import">{{ StoreActionIcon }}</v-icon>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { catchRouteErr } from "@/common/constants/Utils";
@Component({
  components: {},
})
export default class Maintenance extends Vue {
  // setting下拉框选项
  settingItems = [
    "Message Info",
    "Country",
    "Holiday",
    "Team",
    "Contact Type",
    "Project Type",
    "Problem Type",
    "Item Type",
    "Expense Type",
  ];

  // admin下拉框选项
  adminItems = [
    "User",
    "Device",
    "User Group Right",
    "Document Approval",
    "Attendance",
  ];
  model = "Setting";
  defaultSelected = this.settingItems[0];
  selected = this.defaultSelected;

  get StoreActionIcon() {
    return this.$store.state.MaintenanceStore.actionIcon;
  }

  @Watch("$route.name", { immediate: true })
  initSelected(routeName: string) {
    if (routeName !== null && routeName !== undefined) {
      if (this.settingItems.includes(routeName)) {
        this.model = "Setting";
        this.selected = routeName;
        return;
      } else if (this.adminItems.includes(routeName)) {
        this.model = "Admin";
        this.selected = routeName;
        return;
      }
    }
    // 当前$route.name不存在则跳转到Setting默认页
    this.switchDefaultStatus();
  }

  switchDefaultStatus() {
    this.model = "Setting";
    this.selected = this.defaultSelected;
  }

  selectItem(itemName: string) {
    this.$router.push({ name: itemName }).catch((err) => {
      catchRouteErr(err);
    });
  }

  clickAction() {
    this.$bus.$emit("clickAction");
  }
}
</script>

<style lang="scss" scoped>
@import "./Maintenance.scss";
</style>
